<template>
	<view class="login-container">
		<view class="top-box">
			<view class="circle1"></view>
			<view class="circle2"></view>
			<view class="circle3"></view>
		</view>
		<view class="bottom-box">
			<view class="form-bar">
				<view class="title">{{ customerName }}</view>
				<view class="form-box">
					<view class="form-item">
						<u-icon class="ipt-icon" name="home-fill" size="25" />
						<u-input v-model="ruleForm.tenantName" placeholder="公司码" border="bottom" :fontSize="fontSize"
							:adjustPosition="true" class="width-100 ipt-item" :customStyle="customIptStyle"></u-input>
					</view>
					<view class="form-item">
						<u-icon class="ipt-icon" name="account-fill" size="26" />
						<u-input v-model="ruleForm.username" placeholder="账号" :cursorSpacing="90" border="bottom" :fontSize="fontSize"
							:adjustPosition="true" class="width-100 ipt-item" :customStyle="customIptStyle"></u-input>
					</view>
					<view class="form-item">
						<u-icon class="ipt-icon" name="lock-opened-fill" size="26" />
						<u-input v-model="ruleForm.password" placeholder="密码" :cursorSpacing="90" :fontSize="fontSize" :holdKeyboard="true"
							:adjustPosition="true" border="bottom" type="password" class="width-100 ipt-item"
							:customStyle="customIptStyle"></u-input>
					</view>
					<view class="login-btn width-100-percentage">
						<u-button
                            class="margin-top-20"
                            :loading="loading"
                            @click="onLoginBtn"
                            type="primary"
							custom-style="customStyle"
                            color="#3042cc" size="large"
                        >登录</u-button>
						<!--<view class="instruction-for-use">注：该应用仅限合作企业使用</view>-->
                        <view @click="onQuickLoginBtn" class="flex-end-center margin-top-30">
                            <view style="font-size: 24rpx;" class="flex-end-center">
                                <view>第三方：</view>
                                <view style="color: #2d8cf0;">微信授权登录</view>
                            </view>
                        </view>
					</view>
				</view>
			</view>
		</view>
        <jkPopup
            :show="showPopup"
            title="微信授权说明"
            :showConfirm="false"
            @close="showPopup = false"
            @confirm="autoLogin"
        >
            <view class="margin-bottom-30 margin-top-30" style="font-size: 16px;">为提供更高效、快捷的服务，将获取微信的基本信息用于快速登录。</view>
            <button class="margin-bottom-20" @click="handleOpenPrivacyContract">查看隐私协议</button>
            <button id="agree-btn" open-type="agreePrivacyAuthorization" type="default" style="background: #2d8cf0;color: #fff;" @click="autoLogin" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </jkPopup>
	</view>
</template>
<script>
    import {
        frameUserLogin,
        systemPlatformCustomerGetIdByName
    } from "../../api";
    import {
        getOpenId,
        setCorpCode,
        setToken
    } from "../../utils/auth";
    import autoLoginMixin from './autoLoginMixin'
    import jkPopup from "../../jk-components/jk-popup";
    import {env} from "../../utils/env";
	export default {
        components: {
            jkPopup,
        },
	    mixins: [autoLoginMixin],
		data() {
			return {
                customerName: env.name,
                fontSize: '32rpx',
				ruleForm: {
					tenantId: null,
					tenantName: '',
					username: '',
					password: ''
				},
				prefixIconStyle: {
					fontSize: '38rpx',
					marginRight: '10rpx'
				},
				loading: false,
				customIptStyle: {
					borderBottom: 'solid 1px #dcdee2'
				}
			};
		},
		methods: {
            onQuickLoginBtn() {
                this.showAuthTips();
            },
			getTenantRequest() {
				if (this.ruleForm.tenantName) {
					return systemPlatformCustomerGetIdByName({
						name: this.ruleForm.tenantName
					}).then(res => {
						if (res.data.status === 200) {
							this.$set(this.ruleForm, 'tenantId', res.data.res);
							if (res.data.res) {
								setCorpCode(res.data.res);
							} else {
                                uni.showModal({
                                    title: '公司码有误',
                                    showCancel: false,
                                    showConfirm: false,
                                    cancelText: '关闭'
                                });
                            }
						}
					});
				} else {
					uni.showModal({
						title: '请填写公司!',
						showCancel: false,
						showConfirm: false,
						cancelText: '关闭'
					});
				}
			},
            // 登录并绑定
			async toLoginAndBindWxUser() {
				this.loading = true;
				// 判断缓存是否存在openId
				if (!getOpenId()) {
                    if (!this.wxCode) await this.getWxCode();
                    await this.getWxOpenId();
                }
				try {
					await this.getTenantRequest();
				} catch (e) {}
				try {
					if (this.ruleForm.tenantId && getOpenId()) await this.loginRequest();
				} catch (e) {}
				this.loading = false;
			},
			loginRequest() {
				return frameUserLogin({
					username: this.ruleForm.username,
					password: this.ruleForm.password,
                    openId: getOpenId()
				}).then(res => {
					this.loading = false;
					if (res.data.status === 200) {
						setToken(`Bearer ${res.data.res.accessToken}`);
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				});
			},
			onLoginBtn() {
				if (this.ruleForm.username && this.ruleForm.password) {
					this.toLoginAndBindWxUser();
				} else {
					uni.showModal({
						title: '请填写账号或密码!',
						showCancel: false,
						showConfirm: false,
						cancelText: '关闭'
					});
				}
			}
		},
		onShow() {
	        this.showAuthTips();

			// this.$set(this.ruleForm, 'tenantName', '');
			// this.$set(this.ruleForm, 'username', '');
			// this.$set(this.ruleForm, 'password', '');

            // this.$set(this.ruleForm, 'tenantName', '捷控纺织');
            // this.$set(this.ruleForm, 'username', 'admin');
            // this.$set(this.ruleForm, 'password', 'hengyou123');
		}
	}
</script>
<style scoped lang="scss">
	.login-container {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #edeff5;

	}

	.bottom-box {
		height: 45vh;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.top-box {
		width: 100%;
		height: 55vh;
		background: #3042cc;
		position: relative;
		overflow: hidden;
	}

	.circle1 {
		background: #5c6be3;
		height: 200px;
		width: 200px;
		border-radius: 50%;
		position: absolute;
		bottom: 25%;
		left: -100px;
		z-index: 1;
	}

	.circle2 {
		background: #5c6be3;
		height: 100px;
		width: 100px;
		border-radius: 50%;
		position: absolute;
		top: 100px;
		right: 30px;
		z-index: 1;
	}

	.circle3 {
		background: #5c6be3;
		height: 200px;
		width: 200px;
		border-radius: 50%;
		position: absolute;
		bottom: -100px;
		right: -100px;
		z-index: 1;
	}

	.form-bar {
		width: 80%;
		background: #fff;
		border-radius: 28rpx;
		margin-top: -200px;
		z-index: 10;
	}

	.title {
		font-size: 38rpx;
		text-align: center;
		font-weight: 700;
		letter-spacing: 4rpx;
		margin-top: 80rpx;
		margin-bottom: 40rpx;
	}

	.form-box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

	}

	.form-item {
		width: 80%;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		margin: 20rpx 0;
	}

	.login-btn {
		width: 80%;
		font-size: 128rpx !important;
		letter-spacing: 4rpx;
		margin-bottom: 80rpx;
	}

	.ipt-icon {
		margin-right: 14rpx;
	}

	.ipt-item {
		margin-bottom: 0px;
	}

	.instruction-for-use {
		font-size: 24rpx;
		color: #dcdee2;
		text-align: center;
		margin-top: 10rpx;
	}
</style>
